<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="600" height="400"></canvas>
        <script type="text/javascript">
          (function(){
       
    'use strict';
    window.addEventListener('load',init,false);
    var KEY_SPACE=32;
    var KEY_LEFT=37;
    var KEY_RIGHT=39;
    var KEY_ENTER=13;
    var KEY_UP=38;
    var KEY_DOWN=40;
    var canvas=null,ctx=null;
    var lastPress=null;
    var pressing=[];
    var player=new Circle(150,100,5);
    var iShip=new Image();
    iShip.src='nave0.jpg';

//////////////////////////////// MAPA /////////////////
    function init(){
        canvas=document.getElementById('canvas');
        ctx=canvas.getContext('2d');
        canvas.width=500;
        canvas.height=700;
        player.rotation = 0;
        run();
        repaint();
    }

    function run(){
        setTimeout(run,50);
        act(0.005);
    }

    function repaint(){
        requestAnimationFrame(repaint);
        paint(ctx);
    }

    function act(deltaTime){
        // Set Rotation
        if(pressing[KEY_LEFT]){
            player.rotation-=45;
        }
        if(pressing[KEY_RIGHT]){
            player.rotation+=45;
        }
        if(pressing[KEY_UP]) {//ver como se hace
            if (player.rotation === -360 || player.rotation === 0 || player.rotation === 360)
                player.y -= 10;
            if (player.rotation === -180 || player.rotation === 180)
                    player.y += 10;
            if (player.rotation === 45 || player.rotation === -315){
                player.x +=10;
                player.y -=10;
            }
            if (player.rotation === -45 || player.rotation === 315) {
                player.x -=10;
                player.y -=10;
            }
             if (player.rotation === 90 || player.rotation === -270) 
                player.x +=10;
            
            if (player.rotation === -90 || player.rotation === 270)
                    player.x-=10;
            if (player.rotation === 135 || player.rotation === -225) {
                player.x+=10;
                player.y+=10;
            }
            if (player.rotation === 225 || player.rotation === -135) {
                player.x-=10;
                player.y+=10;
            } 
        }
        if(pressing[KEY_DOWN]) {
            if (player.rotation === 180)
                    player.y -= 10;
            if (player.rotation === -360 || player.rotation === -180 || player.rotation === 0 || player.rotation === 360)
                    player.y += 10;
            if (player.rotation === -315 || player.rotation === 225){
                player.x +=10;
                player.y -=10;
            }
            if (player.rotation === 135) {
                player.x -=10;
                player.y -=10;
            }
             if (player.rotation === -270  || player.rotation === 90) 
                player.x -=10;
            
            if (player.rotation === -90 || player.rotation === 270)
                    player.x+=10;
            if (player.rotation === -45 || player.rotation === 315 || player.rotation === -225) {
                player.x+=10;
                player.y+=10;
            }
            if (player.rotation === -135 || player.rotation === 45) {
                player.x-=10;
                player.y+=10;
            } 
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.strokeStyle='#0f0';
        player.drawImage(ctx,iShip);
        
        if(pressing[KEY_SPACE])
            player.stroke(ctx);
        
        ctx.fillStyle='#fff';
        ctx.fillText('Rotation: '+player.rotation,0,20);
    }

    document.addEventListener('keydown',function(evt){
        lastPress=evt.keyCode;
        pressing[evt.keyCode]=true;
    },false);

    document.addEventListener('keyup',function(evt){
        pressing[evt.keyCode]=false;
    },false);

    function Circle(x,y,radius){
        this.x=(x===null)?0:x;
        this.y=(y===null)?0:y;
        this.radius=(radius===null)?0:radius;
        this.scale=1;
        this.rotation=0;
    }
        
    Circle.prototype.distance=function(circle){
        if(circle!==null){
            var dx=this.x-circle.x;
            var dy=this.y-circle.y;
            return (Math.sqrt(dx*dx+dy*dy)-(this.radius+circle.radius));
        }
    }

    Circle.prototype.stroke=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.stroke();
    }

    Circle.prototype.drawImage=function(ctx,img){
        if(img.width){
            ctx.save();
            ctx.translate(this.x,this.y);
            ctx.scale(this.scale,this.scale);
            ctx.rotate(this.rotation*Math.PI/180);
            ctx.drawImage(img,-img.width/2,-img.height/2);
            ctx.restore();
        }
        else
            this.stroke(ctx);
    }

    window.requestAnimationFrame=(function(){
        return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            function(callback){window.setTimeout(callback,17);};
    })();
})();
        
    </script>
  </body>
</html> 